<template>
  <div>
    <tr v-for="(item, index) in list" :key="index">
      <td colspan="5">
        <input type="checkbox" />
        <span>勾选</span>
      </td>
      <td>{{ item.name }}</td>
      <td>{{ item.price }}</td>
      <td>
        <button @click="less(item)">-</button>
        {{ item.num }}
        <button @click="plus(item)">+</button>
      </td>
      <td>{{ item.price * item.num }}</td>
      <!-- <td>{{ money }}</td> -->
      <td>
        <button @click="delete_all(item)">删除</button>
      </td>
    </tr>
  </div>
</template>

<script>
export default {
  props: ["list"],
  data() {
    return {
      total_price: 0,
    };
  },
  computed: {
    money(item) {
      return item.price * item.num;
    },
    get_total_price() {
      return this.list.reduce(
        (result, item) => result + item.price * item.num,
        0
      );
    },
  },
  methods: {
    // 从购物车中添加一件该商品
    plus(item) {
      item.num++;
      this.total_price += item.price * item.num;
      this.$emit("money", this.total_price);
    },
    // 从购物车中减去一件该商品
    less(item) {
      if (item.num === 0) return;
      item.num--;
      this.total_price -= item.price * item.num;
      this.$emit("money", this.total_price);
    },
    // 从购物车中清空该商品
    delete_all(item) {
      item.num = 0;
      this.total_price -= item.price * 0;
      this.$emit("money", this.total_price);
    },
  },
};
</script>

<style>
</style>